<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_form": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_form": "active",
      "form_search": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Forms</a></li>
              <li class="breadcrumb-item active" aria-current="page">Search</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Search</h1>
        <p class="td-lead">Search lets users specify a word or phrase to search for relevant pieces of information. Search can be used as a filter or a primary means of searching some content.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The basic style for search component that can be submitted by hitting enter kay or by clicking the search icon on the right side of the bar.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="wd-lg-40p">
            <div class="search-form">
              <input type="search" class="form-control" placeholder="Search">
              <button class="btn" type="button"><i data-feather="search"></i></button>
            </div><!-- search-form -->
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;search-form&quot;&gt;
  &lt;input type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i data-feather=&quot;search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Expanding Search Bar</h4>
        <p class="mg-b-30">A search input that can be expanded when clicking the search icon and automaticall minimize when focusing outside of the input box.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="wd-lg-40p d-flex justify-content-end">
            <form id="searchExpanding" class="search-form search-form-expanding">
              <input type="search" class="form-control" placeholder="Search">
              <button class="btn" type="button"><i data-feather="search"></i></button>
            </form><!-- search-form -->
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;form id=&quot;searchExpanding&quot; class=&quot;search-form search-form-expanding&quot;&gt;
  &lt;input type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i data-feather=&quot;search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/form&gt;</code></pre>
        <pre><code class="language-js">$(&apos;#searchExpanding button&apos;).on(&apos;click&apos;, function(e){
  e.preventDefault()

  if($(this).prev().val() === &apos;&apos;) {
    $(this).parent().toggleClass(&apos;expand&apos;);
  } else {
    $(this).parent().submit();
  }
})

// Collapse expanding search
$(&apos;#searchExpanding .form-control&apos;).on(&apos;focusout&apos;, function(e){
  if($(this).val() === &apos;&apos;) {
    $(this).parent().removeClass(&apos;expand&apos;);
  }
})</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">With Typeahead</h4>
        <p class="mg-b-30">When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. Read the <a href="https://twitter.github.io/typeahead.js/examples" target="_blank">Official Typeahead Documentation</a> for a full list of instructions and other options.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="theBasics" type="search" class="form-control" placeholder="Search States of USA">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;search-form&quot;&gt;
  &lt;input id=&quot;theBasics&quot; type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search States of USA&quot;&gt;
&lt;/div&gt;</code></pre>
          <pre><code class="language-js">var substringMatcher = function(strs) {
return function findMatches(q, cb) {
  var matches, substrRegex;

  // an array that will be populated with substring matches
  matches = [];

  // regex used to determine if a string contains the substring `q`
  substrRegex = new RegExp(q, &apos;i&apos;);

  // iterate through the pool of strings and for any string that
  // contains the substring `q`, add it to the `matches` array
  $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
      matches.push(str);
    }
  });

  cb(matches);
};
};

var states = [&apos;Alabama&apos;, &apos;Alaska&apos;, &apos;Arizona&apos;, &apos;Arkansas&apos;, &apos;California&apos;,
&apos;Colorado&apos;, &apos;Connecticut&apos;, &apos;Delaware&apos;, &apos;Florida&apos;, &apos;Georgia&apos;, &apos;Hawaii&apos;,
&apos;Idaho&apos;, &apos;Illinois&apos;, &apos;Indiana&apos;, &apos;Iowa&apos;, &apos;Kansas&apos;, &apos;Kentucky&apos;, &apos;Louisiana&apos;,
&apos;Maine&apos;, &apos;Maryland&apos;, &apos;Massachusetts&apos;, &apos;Michigan&apos;, &apos;Minnesota&apos;,
&apos;Mississippi&apos;, &apos;Missouri&apos;, &apos;Montana&apos;, &apos;Nebraska&apos;, &apos;Nevada&apos;, &apos;New Hampshire&apos;,
&apos;New Jersey&apos;, &apos;New Mexico&apos;, &apos;New York&apos;, &apos;North Carolina&apos;, &apos;North Dakota&apos;,
&apos;Ohio&apos;, &apos;Oklahoma&apos;, &apos;Oregon&apos;, &apos;Pennsylvania&apos;, &apos;Rhode Island&apos;,
&apos;South Carolina&apos;, &apos;South Dakota&apos;, &apos;Tennessee&apos;, &apos;Texas&apos;, &apos;Utah&apos;, &apos;Vermont&apos;,
&apos;Virginia&apos;, &apos;Washington&apos;, &apos;West Virginia&apos;, &apos;Wisconsin&apos;, &apos;Wyoming&apos;
];

$(&apos;#theBasics&apos;).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: &apos;states&apos;,
source: substringMatcher(states)
});</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Bloodhound</h4>
        <p class="mg-b-30">For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. </p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="bloodhound" type="search" class="form-control" placeholder="Search States of USA">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in &quot;The Basics&quot;
  local: states
});

$(&apos;#bloodhound&apos;).typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: &apos;states&apos;,
  source: states
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Prefetch</h4>
        <p class="mg-b-30">Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads. </p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="prefetch" type="search" class="form-control" placeholder="Search Countries">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // url points to a json file that contains an array of country names, see
  prefetch: &apos;../data/countries.json&apos;
});

// passing in null for the options arguments will result in the default
// options being used
$(&apos;#prefetch&apos;).typeahead(null, {
  name: &apos;countries&apos;,
  source: countries
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Remote</h4>
        <p class="mg-b-30">Remote data is only used when the data provided by local and prefetch is insufficient. In order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited. </p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="remote" type="search" class="form-control" placeholder="Oscar winners for Best Picture">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;value&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/films/post_1960.json&apos;,
  remote: {
    url: &apos;../data/films/queries/%QUERY.json&apos;,
    wildcard: &apos;%QUERY&apos;
  }
});

$(&apos;#remote&apos;).typeahead(null, {
  name: &apos;best-pictures&apos;,
  display: &apos;value&apos;,
  source: bestPictures
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Custom Template</h4>
        <p class="mg-b-30">Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. </p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="custom" type="search" class="form-control" placeholder="Oscar winners for Best Picture">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">$(&apos;#custom &apos;).typeahead(null, {
  name: &apos;best-pictures&apos;,
  display: &apos;value&apos;,
  source: bestPictures,
  templates: {
    empty: [
      &apos;&lt;div class=&quot;empty-message&quot;&gt;&apos;,
        &apos;Unable to find any best picture winners that match the current query&apos;,
      &apos;&lt;/div&gt;&apos;
    ].join(&apos;\n&apos;),
    suggestion: Handlebars.compile(&apos;&lt;div&gt;&lt;strong&gt;{{value}}&lt;/strong&gt; – {{year}}&lt;/div&gt;&apos;)
  }
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section8" class="tx-inverse mg-b-35">Multiple Datasets</h5>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="datasets" type="search" class="form-control" placeholder="NBA and NHL teams">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">var nbaTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;team&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/nba.json&apos;
});

var nhlTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;team&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/nhl.json&apos;
});

$(&apos;#datasets&apos;).typeahead({
  highlight: true
},
{
  name: &apos;nba-teams&apos;,
  display: &apos;team&apos;,
  source: nbaTeams,
  templates: {
    header: &apos;&lt;h3 class=&quot;league-name&quot;&gt;NBA Teams&lt;/h3&gt;&apos;
  }
},
{
  name: &apos;nhl-teams&apos;,
  display: &apos;team&apos;,
  source: nhlTeams,
  templates: {
    header: &apos;&lt;h3 class=&quot;league-name&quot;&gt;NHL Teams&lt;/h3&gt;&apos;
  }
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section9" class="tx-inverse mg-b-35">Scrollable Dropdown</h5>

        <div data-label="Example" class="td-example demo-forms">
          <div class="search-form search-suggestion-fixed wd-lg-50p">
            <input id="scrollDrop" type="search" class="form-control" placeholder="Countries">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-js">$(&apos;#scrollDrop&apos;).typeahead(null, {
  name: &apos;countries&apos;,
  limit: 10,
  source: countries
});</code></pre>
 
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Expanding Search Bar</a>
            <a href="#section3" class="nav-link">With Typeahead</a>
            <a href="#section4" class="nav-link">Bloodhound</a>
            <a href="#section5" class="nav-link">Prefetch</a>
            <a href="#section6" class="nav-link">Remote</a>
            <a href="#section7" class="nav-link">Custom Template</a>
            <a href="#section8" class="nav-link">Multiple Datasets</a>
            <a href="#section9" class="nav-link">Scrollable Dropdown</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->
    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'
 
       // Expand expanding search
       $('#searchExpanding button').on('click', function(e){
          e.preventDefault()

          if($(this).prev().val() === '') {
            $(this).parent().toggleClass('expand');
          } else {
            $(this).parent().submit();
          }
        })

        // Collapse expanding search
        $('#searchExpanding .form-control').on('focusout', function(e){
          if($(this).val() === '') {
            $(this).parent().removeClass('expand');
          }
        })

      });
    </script>
  </body>
</html>
